<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/articleDetail.css" th:href="@{/css/articleDetail.css}">
    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>文章页面</title>

    <link rel="stylesheet" href="../static/css/nav.css" th:href="@{/css/nav.css}">
</head>
<body>
<div style="height: 9.5vh; display: flex; justify-content: center; align-items: center; position: relative;background-color: white;width: 100%" th:replace="nav::nav">

</div>
<div class="article-container">


    <div class="article-content">
        <h1 th:text="${posts.title}">2025华为手机“别盲目买”，这4款几乎“零差评”，最低仅1289元</h1>
        <div class="article-meta">
            <span class="article-date" th:text="${posts.createdAt}">2025-03-22 21:47</span>
            <span class="article-author" th:text="${user.username}">·科技派大星</span>
        </div>
        <img th:src="${posts.imageUrl}" alt="" th:if="${not #strings.isEmpty(posts.imageUrl)}" >

        <p th:text="${posts.content}">
        </p>



    </div>
    <div class="right-column">
        <div class="author-card">
            <h2 class="card-title">关于作者</h2>
            <div class="author-info">
                <img th:src="${user.avatar}" alt="作者头像" class="author-avatar">
                <div class="author-name-container">
                    <span class="author-name" th:text="${user.username}"></span>
                    <span class="author-badge">🏆</span>
                </div>
            </div>
            <div class="author-stats">
                <div class="stat-item">
                    <span class="stat-label">想法</span>
                    <span class="stat-value" th:text="${thoughtNum}"></span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">文章</span>
                    <span class="stat-value" th:text="${postsNum}"></span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">关注者</span>
                    <span class="stat-value" th:text="${user.subscription}"></span>
                </div>
            </div>
            <div class="author-actions">
                <button class="follow-button" th:value="${user.id}" >+ 关注</button>
<!--                <button class="message-button">发私信</button>-->
            </div>
        </div>
        <div class="interaction-container">
            <div class="like-section" th:data-value="${posts.id}" >
                <div class="like-icon-container icon-container">
                    <i class="iconfont like-icon" style=" color: rgb(82, 91, 100,1);">&#xe610;</i>
                </div>
                <div class="count-container">
                    <span class="count like-count" th:text="${posts.likeCount}"></span>
                </div>
            </div>
            <div class="comment-section1" th:data-value="${posts.id}" onclick="articleDetail(this.dataset.value)">
                <div class="icon-container">
                    <i class="iconfont comment-icon">&#xe6ad;</i>
                </div>
                <div class="count-container">
                    <span class="count comment-count" th:text="${posts.commentCount}"></span>
                </div>
            </div>

            <div class="share-section">
                <div class="icon-container">
                    <i class="iconfont share-icon">&#xe60e;</i>
                </div>
                <div class="text-container">
                    <span class="text">分享</span>
                </div>
            </div>
            <div class="share-outer">
                <div class="share-detail">
                    <i class="iconfont">&#xe618;</i>
                    <span>复制链接</span>
                </div>
            </div>
        </div>
        <button id="backBtn" class="back-button">
            <i class="iconfont">&#xe61b;</i>
            <span>返回上一页</span>
        </button>
    </div>
    <div class="comment-section">
        <div class="header-outer">
        <div  class="comment-header-outer">
            <div class="comment-header">
                <span class="total-comments" >全部评论  <span th:text="${posts.commentCount}"></span> </span>
                <i class="iconfont close">&#xe616;</i>
            </div>
        </div>
        </div>
<div class="comment-item-outer"></div>
<div class="comment-input-outer">
        <div class="comment-input">
            <input type="text" placeholder="留下你的精彩评论吧"  class="comment-input-detail">
            <div class="input-icons" th:data-value="${posts.id}" onclick="publish(this.dataset.value)">
                <i class="iconfont">&#xe642; </i>
                <span class="emoji-icon" > 发布</span>

            </div>
        </div>
</div>
    </div>
</div>
<script th:inline="javascript">
     let isLiked =[[${isLiked}]] ;
     let like_icon = document.getElementsByClassName('like-icon')[0]
     if(isLiked){

         like_icon.style.color = 'rgba(255,0,0,1)'
     }

     let isFollowing =[[${isFollowing}]] ;
     let follow_button = document.querySelector('.follow-button');
     if(isFollowing){
         follow_button.classList.add('following');
         follow_button.textContent = '取消关注';
     }
// let comments = JSON.parse([[${comments}]]) ;
//
// let commentUsers = JSON.parse([[${commenmtUsers}]]) ;
// console.log(comments)
// console.log(users)
// console.log(posts)
     let result = [[${result}]];
     let errorMessage = [[${errorMessage}]];
     console.log(result)
     if (result && result !== '') {
         showCustomAlert(result, 3000);
     }
     if (errorMessage && errorMessage !== '') {
         showCustomAlert(errorMessage, 3000);
     }
</script>
<script src="../static/js/video.js" th:src="@{/js/video.js}"></script>
</body>
<script src="../static/js/articleDetail.js" th:src="@{/js/articleDetail.js}"></script>
</html>